<template>
  <div class="case-detail-simple">
    <div class="detail-header">
      <h1>
        <span class="back-icon" @click="goBack">
          <el-icon class="icon">
            <el-icon-arrow-left />
          </el-icon>
        </span>
        Mobile Phone Installment Review
      </h1>
    </div>
    
    <div class="detail-content">
      <!-- 客户信息行 -->
      <div class="info-line">
        <span class="info-label">Customer Name:</span>
        <span class="info-value">{{ customerInfo.customerName }}</span>
        <span class="info-label">NIN Number:</span>
        <span class="info-value">{{ customerInfo.ninNumber }}</span>
        <span class="info-label">Mobile No:</span>
        <span class="info-value">{{ customerInfo.mobileNo }}</span>
        <span class="info-label">Customer Preferred Language:</span>
        <span class="info-value">{{ customerInfo.preferredLanguage }}</span>
      </div>
      
      <!-- 审核信息 -->
      <div class="review-section">
        <div class="info-row">
          <span class="info-label">Latest Review Time:</span>
          <span class="info-value">{{ reviewInfo.latestReviewTime }}</span>
        </div>
        
        <div class="info-row">
          <span class="info-label">Returns:</span>
          <span class="info-value">{{ reviewInfo.returnInfo }}</span>
        </div>
        
        <div class="info-row">
          <span class="info-label">Remark:</span>
          <span class="info-value remark">{{ reviewInfo.remark }}</span>
        </div>
      </div>
      <div class="check">
        <!-- 右侧浮动索引条 -->
        <div class="section-index">
          <div class="index-header">Index</div>
          <div class="index-items">
            <div class="index-item" @click="scrollToSection('kyc-section')">KYC Information</div>
            <div class="index-item" @click="scrollToSection('photo-section')">Photo Comparison</div>
            <div class="index-item" @click="scrollToSection('call-section')">Call Customer</div>
            <div class="index-item" @click="scrollToSection('call-sub-section')">Call Contact</div>
            <div class="index-item" @click="scrollToSection('application-content-new')">Application Information</div>
            <div class="index-item" @click="scrollToSection('result-content')">I Give the Result</div>
          </div>
        </div>
      <!-- KYC Information -->
      <div class="kyc-section">
        <h2>▼ KYC Information</h2>
        <div class="kyc-content">
          <div class="kyc-left">
            <h3>Customer Provided Information</h3>
            <div class="info-item">
              <span class="label">Full Name:</span>
              <span class="value">MUHAMMED LAVAL SHUAIAB</span>
            </div>
            <div class="info-item">
              <span class="label">Date of Birth:</span>
              <span class="value">04 Jan 1967</span>
            </div>
            <div class="info-item">
              <span class="label">Age:</span>
              <span class="value">58 years old</span>
            </div>
            <div class="info-item">
              <span class="label">Gender:</span>
              <span class="value">Male</span>
            </div>
            <div class="info-item">
              <span class="label">Home Address:</span>
              <span class="value">Kwara State, Oju-Ekun, Kalaidika compound, okeapomu street, abayawu, Ilorin, Kwara State 119</span>
            </div>
          </div>
          <div class="kyc-right">
            <h3>Review Result</h3>
            <div class="review-result">
              <span class="success-icon">✓</span>
              <span class="success-text">KYC has verified. No need to review</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Photo Comparison -->
      <div class="photo-section">
        <h2>▼ Photo Comparison</h2>
        <div class="photo-content">
          <div class="photo-left">
            <h3>Photo Comparison</h3>
            
            <!-- BVN Photo vs Customer's Selfie -->
            <div class="comparison-group">
              <div class="comparison-item">
                <div class="photo-label">BVN Photo</div>
                <div class="photo-placeholder">Photo 1</div>
              </div>
              <div class="comparison-item">
                <div class="photo-label">Customer's Selfie</div>
                <div class="photo-placeholder">Photo 2</div>
              </div>
            </div>
            
            <!-- Sales Photo vs Customer and Sales Photo -->
            <div class="comparison-group">
              <div class="comparison-item">
                <div class="photo-label">Sales' Registered Photo / Sales NIN Photo</div>
                <div class="photo-placeholder">Photo 3</div>
                <div class="photo-placeholder">Photo 4</div>
              </div>
              <div class="comparison-item">
                <div class="photo-label">Customer and Sales Photo</div>
                <div class="photo-placeholder">Photo 5</div>
              </div>
            </div>
          </div>
          <div class="photo-right">
            <h3>Review Result</h3>
            <div class="similarity">
              <span>Similarity: <strong>100%</strong></span>
            </div>
            <div class="confirmation-group">
              <p>Confirm that the person in Photo and Customer's Selfie are the same person</p>
              <div class="radio-group">
                <label><input type="radio" name="selfie-confirm" v-model="caseData.selfieConfirm" value="Yes"> Yes</label>
                <label><input type="radio" name="selfie-confirm" v-model="caseData.selfieConfirm" value="No"> No</label>
                <label><input type="radio" name="selfie-confirm" v-model="caseData.selfieConfirm" value="Not Sure"> Not Sure</label>
              </div>
            </div>
            <div class="confirmation-group">
              <p>Confirm that both the customer and the registered sales are in the photo</p>
              <div class="radio-group">
                <label><input type="radio" name="sales-confirm" v-model="caseData.salesConfirm" value="Yes"> Yes</label>
                <label><input type="radio" name="sales-confirm" v-model="caseData.salesConfirm" value="No"> No</label>
                <label><input type="radio" name="sales-confirm" v-model="caseData.salesConfirm" value="Not Sure"> Not Sure</label>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Call Customer -->
      <div class="call-section">
        <h2>▼ Call Customer</h2>
         <div class="contact-note">
            <p>Call contact person based on the call result. That's OK.</p>
          </div>
        <div class="call-content">
          <div class="call-left">
            <h3>Customer Information</h3>
            <div class="info-item">
              <span class="label">Full Name:</span>
              <span class="value">MUHAMMED LAVAL SHUAIAB</span>
            </div>
            <div class="info-item">
              <span class="label">Customer Preferred Language:</span>
              <span class="value">Yoruba</span>
            </div>
            <div class="info-item">
              <span class="label">Mobile Number:</span>
              <span class="value">02340818086655</span>
              <span class="call-icon">📞</span>
            </div>
            <div class="info-item">
              <span class="label">Alternative Number:</span>
              <span class="value"></span>
            </div>
            <div class="info-item">
              <span class="label">WhatsApp:</span>
              <span class="value"></span>
            </div>
            <div class="info-item">
              <span class="label">BVN Number:</span>
              <span class="value">22157041534</span>
            </div>
            <div class="info-item">
              <span class="label">Work Information:</span>
              <span class="value">Government employee</span>
            </div>
            <div class="info-item">
              <span class="label">Home Address:</span>
              <span class="value">Kwara State, Oju-Ekun, Kalaidika compound, okeapomu street, abayawu, Ilorin, Kwara State 119</span>
            </div>
          </div>
          <div class="call-right">
            <h3>Review Result</h3>
            <div class="review-section">
              <p>Call Availability Check: Select "Unavailable" and return after 3 tries</p>
              <div class="radio-group">
                <label><input type="radio" name="availability" v-model="caseData.availability" value="Available"> Available</label>
                <label><input type="radio" name="availability" v-model="caseData.availability" value="Unavailable"> Unavailable</label>
              </div>
              <textarea class="notes-input" placeholder="Optional: Please record any abnormal things during the call"></textarea>
            </div>
            
            <div class="review-section">
              <p>BVN Match Check</p>
              <div class="radio-group">
                <label><input type="radio" name="bvn-match" v-model="caseData.bvnMatch" value="Match"> Match</label>
                <label><input type="radio" name="bvn-match" v-model="caseData.bvnMatch" value="Not Match"> Not Match</label>
                <label><input type="radio" name="bvn-match" v-model="caseData.bvnMatch" value="Not Sure"> Not Sure</label>
              </div>
            </div>
            
            <div class="review-section">
              <p>Sensitive occupation(police, soldier, civil servant, media industry, same industry, etc.)</p>
              <div class="radio-group">
                <label><input type="radio" name="occupation" v-model="caseData.occupation" value="Normal Occupation"> Normal Occupation</label>
                <label><input type="radio" name="occupation" v-model="caseData.occupation" value="Sensitive Occupation"> Sensitive Occupation</label>
                <label><input type="radio" name="occupation" v-model="caseData.occupation" value="False Information"> False Information</label>
              </div>
              <div class="if-condition">
                <p>If the occupation is real</p>
                <div class="radio-group">
                  <label><input type="radio" name="occupation-real" v-model="caseData.occupationReal" value="Yes"> Yes</label>
                  <label><input type="radio" name="occupation-real" v-model="caseData.occupationReal" value="No"> No</label>
                </div>
              </div>
            </div>
            
            <div class="review-section">
              <div class="if-condition">
                <p>If customer have the ability to repay</p>
                <div class="radio-group">
                  <label><input type="radio" name="ability-repay" v-model="caseData.abilityRepay" value="Yes"> Yes</label>
                  <label><input type="radio" name="ability-repay" v-model="caseData.abilityRepay" value="No"> No</label>
                </div>
              </div>
              <div class="if-condition">
                <p>If customer have the willing to repay</p>
                <div class="radio-group">
                  <label><input type="radio" name="willing-repay" v-model="caseData.willingRepay" value="Yes"> Yes</label>
                  <label><input type="radio" name="willing-repay" v-model="caseData.willingRepay" value="No"> No</label>
                </div>
              </div>
            </div>
            
            <div class="review-section">
              <p>Home Address Check: If home address is wrong or lack details you can directly modify it after asking the customer by phone.</p>
              <div class="radio-group">
                <label><input type="radio" name="address-check"> Match</label>
                <label><input type="radio" name="address-check"> Not Match</label>
                <label><input type="radio" name="address-check"> Not Sure</label>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Application Information -->
        <div class="application-content">
        <div class="application-left">
            <h3>Application Information</h3>
            <div class="info-item">
            <span class="label">Phone Model:</span>
            <span class="value">Infinix Smart6+S/N:19WXK55X25Z-24 | Price:N197,000.00</span>
            </div>
            <div class="info-item">
            <span class="label">Phone Model:</span>
            <span class="value">Infinix SMART 10 HD/X655X2.6-64</span>
            </div>
            <div class="info-item">
            <span class="label">Model Scan from MFN:</span>
            <span class="value">Infinix SMART 10 HD/X655X2.6-64</span>
            </div>
            <div class="info-item">
            <span class="label">Total Outstanding:</span>
            <span class="value">N142,500.00(repay in 26 terms/weekly)</span>
            </div>
            <div class="info-item">
            <span class="label">First Repayment Date:</span>
            <span class="value">22-Oct-2025</span>
            </div>
            <div class="info-item">
            <span class="label">First Repayment Amount:</span>
            <span class="value">N4,830.00</span>
            </div>
        </div>
        <div class="application-right">
            <h3>Application Information Checks</h3>
            <div class="check-group">
            <p>Ensure that customer is fully informed of this application.</p>
            <div class="radio-group">
                <label><input type="radio" name="informed" v-model="caseData.informed" value="Match"> Match</label>
                <label><input type="radio" name="informed" v-model="caseData.informed" value="Not Match"> Not Match</label>
                <label><input type="radio" name="informed" v-model="caseData.informed" value="Not Sure"> Not Sure</label>
            </div>
            </div>
            
            <div class="check-group">
            <p>Other loan or installment Check.</p>
            <div class="radio-group">
                <label><input type="radio" name="other-loan" v-model="caseData.otherLoan" value="No Loan"> No Loan</label>
                <label><input type="radio" name="other-loan" v-model="caseData.otherLoan" value="Have Loan"> Have Loan</label>
                <label><input type="radio" name="other-loan" v-model="caseData.otherLoan" value="Not Sure"> Not Sure</label>
            </div>
            <input type="text" class="text-input" placeholder="Loan Company(Optional)">
            </div>
        </div>
        </div>
        
        <!-- Call Contact -->
       
      </div>
       <div class="call-sub-section">
          <h2>▼ Call Contact</h2>
          <div class="contact-note">
            <p>Call contact person based on the call result. That's OK.</p>
          </div>
          <div class="contact-content">
            <div class="contact-left">
              <h3>Contact Information</h3>
              <div class="contact-item">
                <div class="info-item">
                  <span class="label">Key Contact:</span>
                  <span class="value">Ibrahim Sulyman</span>
                </div>
                <div class="info-item">
                  <span class="label">Mobile Number:</span>
                  <span class="value">02340907597888</span>
                  <span class="call-icon">📞</span>
                </div>
                <div class="info-item">
                  <span class="label">Relationship:</span>
                  <span class="value">Son</span>
                </div>
              </div>
              
              <div class="contact-item">
                <div class="info-item">
                  <span class="label">Second Contact:</span>
                  <span class="value">Muhammed Michael</span>
                </div>
                <div class="info-item">
                  <span class="label">Mobile Number:</span>
                  <span class="value">02342708693302</span>
                  <span class="call-icon">📞</span>
                </div>
                <div class="info-item">
                  <span class="label">Relationship:</span>
                  <span class="value">Brother</span>
                </div>
              </div>
              
              <div class="info-item">
                <span class="label">Customer's Work Information:</span>
                <span class="value">Government employee</span>
              </div>
              
              <div class="info-item">
                <span class="label">Customer's Home Address:</span>
                <span class="value">Kwara State, Oju-Ekun, Kalaidika compound, okeapomu street, abayawu, Ilorin, Kwara State 119</span>
              </div>
            </div>
            <div class="contact-right">
              <h3>Review Result</h3>
              <div class="check-group">
                <p>Call Availability Check</p>
                <div class="radio-group">
                  <label><input type="radio" name="contact-availability" v-model="caseData.contactAvailability" value="Key Contact Available"> Key Contact Available</label>
                  <label><input type="radio" name="contact-availability" v-model="caseData.contactAvailability" value="Secondary Contact Available"> Secondary Contact Available</label>
                  <label><input type="radio" name="contact-availability" v-model="caseData.contactAvailability" value="Unavailable"> Unavailable</label>
                </div>
                <textarea class="notes-input" placeholder="Optional: Please record any abnormal things during the call"></textarea>
              </div>
              
              <div class="check-group">
                <p>Is the relationship real?</p>
                <div class="radio-group">
                  <label><input type="radio" name="relationship-real" v-model="caseData.relationshipCheck" value="Yes"> Yes</label>
                  <label><input type="radio" name="relationship-real" v-model="caseData.relationshipCheck" value="No"> No</label>
                  <label><input type="radio" name="relationship-real" v-model="caseData.relationshipCheck" value="Not Sure"> Not Sure</label>
                </div>
              </div>
              
              <div class="check-group">
                <p>Customer's Work Information Check</p>
                <div class="radio-group">
                  <label><input type="radio" name="work-check" v-model="caseData.workInfoCheck" value="Match"> Match</label>
                  <label><input type="radio" name="work-check" v-model="caseData.workInfoCheck" value="Not Match"> Not Match</label>
                  <label><input type="radio" name="work-check" v-model="caseData.workInfoCheck" value="Not Sure"> Not Sure</label>
                </div>
              </div>
              
              <div class="check-group">
                <p>Customer's Home Address Check</p>
                <div class="radio-group">
                  <label><input type="radio" name="home-address-check" v-model="caseData.addressContactCheck" value="Match"> Match</label>
                  <label><input type="radio" name="home-address-check" v-model="caseData.addressContactCheck" value="Not Match"> Not Match</label>
                  <label><input type="radio" name="home-address-check" v-model="caseData.addressContactCheck" value="Not Sure"> Not Sure</label>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Application Information -->
        <div class="call-sub-section">
          <h2>▼ Application Information</h2>
          <div class="application-content-new">
            <div class="application-left">
              <div class="info-item">
                <span class="label">Customer Type:</span>
                <span class="value">Distribution Customer</span>
              </div>
              <div class="info-item">
                <span class="label">Sales Address:</span>
                <span class="value">Kwara State East</span>
              </div>
              <div class="info-item">
                <span class="label">Mobile Price:</span>
                <span class="value">N197,000.00</span>
              </div>
              <div class="info-item">
                <span class="label">Service Fee Rate:</span>
                <span class="value">0.35%/month</span>
              </div>
              <div class="info-item">
                <span class="label">Total Outstanding:</span>
                <span class="value">N142,500.00(repay in 26 terms/weekly)</span>
              </div>
            </div>
            <div class="application-right">
              <div class="info-item">
                <span class="label">Dealer/Shop Name:</span>
                <span class="value">TOHEER MUHAMMED SULIEIMAN</span>
              </div>
              <div class="info-item">
                <span class="label">Sales Account:</span>
                <span class="value">QUADRI ALABI OBA(234080015997567)</span>
              </div>
              <div class="info-item">
                <span class="label">Mobile Model:</span>
                <span class="value">Infinix Smart6+S/N:19WXK55X25Z-24</span>
              </div>
              <div class="info-item">
                <span class="label">Down Payment:</span>
                <span class="value">N2,350.00 (Down payment Ratio: 22%)</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Give the Result -->
        <div class="call-sub-section">
          <h2>▼ Give the Result</h2>
          <div class="result-content">
            <div class="result-section">
              <h3>Review Result</h3>
              <div class="result-buttons">
                <button type="button" @click="handleReturnChange" class="btn-return">Return</button>
                <button type="button" @click="handleSubmitChange" class="btn-submit">Submit</button>
              </div>
            </div>
          </div>
        </div>

    </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus';

// 定义响应式数据，包含所有radio-group的响应式值
const caseData = reactive({
    reviewResult: '',
    selfieConfirm: '',
    salesConfirm: '',
    availability: 'Unavailable',
    contactAvailability: 'Secondary Contact Available',
    bvnMatch: '',
    occupation: '',
    occupationReal: '',
    abilityRepay: '',
    willingRepay: '',
    addressCheck: '',
    informed: '',
    otherLoan: '',
    relationshipCheck: '',
    workInfoCheck: '',
    addressContactCheck: '',
    finalResult: ''
  });

// 获取路由参数和路由实例
const route = useRoute();
const router = useRouter();
const caseId = route.params.id;

// 客户信息
const customerInfo = reactive({
  customerName: 'MOHAMMED UMARU SHEHU',
  ninNumber: '27251754142',
  mobileNo: '02348018180955',
  preferredLanguage: 'Yoruba'
});

// 审核信息
const reviewInfo = reactive({
  latestReviewTime: '15 Oct 2025 13:08:22',
  returnInfo: '1. Income details writing on missing details',
  remark: 'customer needs to confirm his ban number'
});

// 模拟获取详情数据
const getCaseDetail = () => {
  // 实际项目中这里会根据caseId从API获取数据
  console.log('Fetching case detail for ID:', caseId);
};

// 返回列表页
const goBack = () => {
  router.push('/cases/list');
};

// 滚动到指定区块
const scrollToSection = (sectionId: string) => {
  const element = document.getElementById(sectionId) || document.querySelector(`.${sectionId}`);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    // 添加高亮效果
    const indexItems = document.querySelectorAll('.index-item');
    indexItems.forEach(item => item.classList.remove('active'));
    const activeItem = document.querySelector(`.index-item[onclick*="${sectionId}"]`);
    if (activeItem) {
      activeItem.classList.add('active');
    }
  }
};

// 监听滚动，更新索引高亮
onMounted(() => {
  const handleScroll = () => {
    const sections = [
      'kyc-section',
      'photo-section', 
      'call-section',
      'call-sub-section',
      'application-content-new',
      'result-content'
    ];
    
    for (const section of sections) {
      const element = document.getElementById(section) || document.querySelector(`.${section}`);
      if (element) {
        const rect = element.getBoundingClientRect();
        if (rect.top <= 100 && rect.bottom >= 100) {
          const indexItems = document.querySelectorAll('.index-item');
          indexItems.forEach(item => item.classList.remove('active'));
          const activeItem = document.querySelector(`.index-item[onclick*="${section}"]`);
          if (activeItem) {
            activeItem.classList.add('active');
          }
          break;
        }
      }
    }
  };
  
  window.addEventListener('scroll', handleScroll);
  // 初始化时执行一次
  handleScroll();
  
  // 清理函数
  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
});

// 处理Submit按钮点击事件
const handleSubmitChange = () => {
  // 校验所有必需的radio是否都已选择
  const requiredRadioFields = [
    'selfieConfirm',
    'salesConfirm',
    'availability',
    'contactAvailability',
    'bvnMatch',
    'occupation',
    'abilityRepay',
    'willingRepay',
    'addressCheck',
    'informed',
    'otherLoan',
    'relationshipCheck',
    'workInfoCheck',
    'addressContactCheck'
  ];
  
  const emptyFields = [];
  requiredRadioFields.forEach(field => {
    if (!caseData[field]) {
      emptyFields.push(field);
    }
  });
  
  if (emptyFields.length > 0) {
    ElMessageBox.alert(`请完成所有单选框的选择后再提交。\n未选择的项：${emptyFields.length}项`, '提示', {
      confirmButtonText: '确定',
      type: 'error'
    });
    caseData.reviewResult = '';
    return;
  }
  
  ElMessageBox.confirm('确定要提交当前页面的所有radio值吗？', '提交确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 用户确认后执行提交逻辑
    caseData.reviewResult = 'Submit';
    submitRadioValues();
  }).catch(() => {
    // 用户取消
    caseData.reviewResult = '';
  });
};

// 提交所有radio值
const submitRadioValues = () => {
  // 获取页面上所有的radio值
  const allRadios = document.querySelectorAll('input[type="radio"]');
  const radioValues = {};
  
  allRadios.forEach(radio => {
    if (radio.checked) {
      if (!radioValues[radio.name]) {
        radioValues[radio.name] = [];
      }
      radioValues[radio.name].push(radio.value || 'checked');
    }
  });
  
  // 这里可以添加实际的提交逻辑，比如API调用
  console.log('提交的radio值:', radioValues);
  
  // 更新数据
  caseData.reviewResult = 'Submit';
  
  // 可以在这里添加成功提示
};

// 处理Return按钮点击事件
const handleReturnChange = () => {
  ElMessageBox.confirm('确定要返回吗？', '返回确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 用户确认后设置返回状态
    caseData.reviewResult = 'Return';
  }).catch(() => {
    // 用户取消
    caseData.reviewResult = '';
  });
};

// 页面加载时获取数据
onMounted(() => {
  getCaseDetail();
});
</script>

<style lang="scss" scoped>
.case-detail-simple {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.detail-header {
  margin-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
}

.detail-header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #333;
}

.back-icon {
  cursor: pointer;
  margin-right: 10px;
  color: #666;
  font-size: 24px;
  vertical-align: middle;
}

.back-icon:hover {
  color: #409eff;
  text-decoration: underline;
}

.detail-content {
  background-color: #fafafa;
  padding: 15px;
  border-radius: 4px;
}

.info-line {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.info-row {
  margin-bottom: 10px;
}

.info-label {
  font-weight: 600;
  color: #666;
  margin-right: 8px;
  white-space: nowrap;
}

.info-value {
  color: #333;
}

.info-value.remark {
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
}

.review-section {
  padding-top: 10px;
  margin-bottom: 30px;
}

// KYC Section
.kyc-section {
  margin-bottom: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.kyc-section h2 {
  margin: 0;
  padding: 10px 15px;
  background-color: #f0f0f0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.kyc-content {
  display: flex;
  padding: 20px;
  background-color: #fff;
}

.kyc-left {
  flex: 2;
  margin-right: 30px;
}

.kyc-right {
  flex: 1;
  border-left: 1px solid #e0e0e0;
  padding-left: 30px;
}

.kyc-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.info-item {
  margin-bottom: 10px;
}

.info-item .label {
  font-weight: 600;
  color: #666;
  margin-right: 8px;
  display: inline-block;
  min-width: 150px;
}

.info-item .value {
  color: #333;
}

.info-item .call-icon {
  color: #409eff;
  cursor: pointer;
  margin-left: 8px;
  font-size: 16px;
}

.info-item .call-icon:hover {
  color: #66b1ff;
}

.review-result {
  padding: 10px;
  background-color: #f0f9eb;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

// Photo Comparison Section
.photo-section {
  margin-bottom: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.photo-section h2 {
  margin: 0;
  padding: 10px 15px;
  background-color: #f0f0f0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.photo-content {
  display: flex;
  padding: 20px;
  background-color: #fff;
}

.photo-left {
  flex: 2;
  margin-right: 30px;
}

.photo-right {
  flex: 1;
  border-left: 1px solid #e0e0e0;
  padding-left: 30px;
}

.photo-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.comparison-group {
  display: flex;
  margin-bottom: 20px;
  gap: 20px;
}

.comparison-item {
  flex: 1;
}

.photo-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
  font-weight: 500;
}

.photo-placeholder {
  width: 120px;
  height: 120px;
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: #999;
  font-size: 12px;
}

.similarity {
  margin-bottom: 20px;
  font-size: 14px;
  color: #333;
}

.confirmation-group {
  margin-bottom: 20px;
}

.confirmation-group p {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 13px;
  color: #666;
}

.radio-group {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
}

// Call Customer Section
.call-section {
  margin-bottom: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.call-section h2 {
  margin: 0;
  padding: 10px 15px;
  background-color: #f0f0f0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.call-content {
  display: flex;
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.call-left {
  flex: 2;
  margin-right: 30px;
}

.call-right {
  flex: 1;
  border-left: 1px solid #e0e0e0;
  padding-left: 30px;
}

.call-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.review-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.review-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.review-section p {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.notes-input {
  width: 100%;
  min-height: 60px;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  resize: vertical;
  font-size: 13px;
  font-family: inherit;
  margin-top: 10px;
}

.notes-input::placeholder {
  color: #c0c4cc;
}

.if-condition {
  margin-top: 15px;
  padding-left: 15px;
  border-left: 3px solid #e0e0e0;
}

.if-condition p {
  font-weight: 500;
  color: #333;
  font-size: 12px;
}

// Call Sub Sections (Application Information and Call Contact)
.call-sub-section {
    margin-bottom: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.call-sub-section h2 {
  margin: 0;
  padding: 10px 15px;
  background-color: #f5f5f5;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
}

.call-sub-section h2:hover {
  background-color: #f0f0f0;
}

// Application Information Section Styles
.application-content {
  display: flex;
  padding: 20px;
  background-color: #fff;
}

.application-left {
  flex: 2;
  margin-right: 30px;
}

.application-right {
  flex: 1;
  border-left: 1px solid #e0e0e0;
  padding-left: 30px;
}

.application-right h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.check-group {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.check-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.check-group p {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.text-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  margin-top: 10px;
}

.text-input::placeholder {
  color: #c0c4cc;
}

// Call Contact Section Styles
.contact-note {
  padding: 10px 20px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #e0e0e0;
}

.contact-note p {
  margin: 0;
  font-size: 13px;
  color: #666;
}

.contact-content {
  display: flex;
  padding: 20px;
  background-color: #fff;
}

.contact-left {
  flex: 2;
  margin-right: 30px;
}

.contact-right {
  flex: 1;
  border-left: 1px solid #e0e0e0;
  padding-left: 30px;
}

.contact-right h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.contact-item {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #f0f0f0;
}

.contact-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

// New Application Information Styles
.application-content-new {
  display: flex;
  padding: 20px;
  background-color: #fff;
}

// Result Content Styles
.result-content {
  padding: 20px;
  background-color: #fff;
}

.result-section {
  margin-bottom: 20px;
}

.result-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.result-buttons {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.btn-return {
  padding: 8px 20px;
  background-color: #ff9800;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-return:hover {
  background-color: #e68900;
}

.btn-submit {
  padding: 8px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-submit:hover {
  background-color: #45a049;
}

.result-buttons label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  font-size: 13px;
}

.result-buttons label:hover {
  border-color: #409eff;
}

.result-buttons input[type="radio"]:checked + span {
  font-weight: 600;
}

// // 添加结果部分的二维码样式
// .result-content::after {
//   content: '';
//   display: block;
//   width: 40px;
//   height: 40px;
//   margin: 20px 0;
//   background-color: #f0f0f0;
//   border: 1px solid #e0e0e0;
//   border-radius: 4px;
// }

/* 右侧浮动索引条样式 */
.section-index {
  position: fixed;
  right: 20px;
  top: 100px;
  width: 180px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 60vh;
  overflow-y: auto;
}

.index-header {
  padding: 12px 16px;
  background-color: #f5f5f5;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e0e0e0;
  font-size: 14px;
}

.index-items {
  padding: 8px 0;
}

.index-item {
  padding: 8px 16px;
  font-size: 13px;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.index-item:hover {
  background-color: #f0f9ff;
  color: #409eff;
}

.index-item.active {
  background-color: #ecf5ff;
  color: #409eff;
  font-weight: 500;
  border-left: 3px solid #409eff;
  padding-left: 13px;
}

/* 响应式设计 - 中等屏幕 */
@media (max-width: 1200px) {
  .section-index {
    width: 150px;
    right: 10px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .info-line {
    flex-direction: column;
    gap: 10px;
  }
  
  .info-line .info-label,
  .review-section .info-label {
    display: inline-block;
    min-width: 150px;
  }
  
  .info-item .label {
    min-width: 100px;
  }
  
  .kyc-content,
  .photo-content,
  .call-content,
  .application-content,
  .application-content-new,
  .contact-content {
    flex-direction: column;
  }
  
  .kyc-right,
  .photo-right,
  .call-right,
  .application-right,
  .contact-right {
    border-left: none;
    border-top: 1px solid #e0e0e0;
    padding-left: 0;
    padding-top: 20px;
    margin-top: 20px;
  }
  
  .comparison-group {
    flex-direction: column;
    gap: 15px;
  }
  
  .radio-group {
    flex-direction: column;
    gap: 8px;
  }
  
  .result-buttons {
    flex-direction: column;
    gap: 10px;
  }
  
  .photo-placeholder {
    width: 100%;
    max-width: 150px;
  }
  
  /* 小屏幕下索引条样式 */
  .section-index {
    position: fixed;
    bottom: 20px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    max-height: 200px;
    background-color: rgba(255, 255, 255, 0.95);
  }
  
  .index-items {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  
  .index-item {
    flex: 0 0 auto;
    min-width: 120px;
    text-align: center;
    border-left: none;
  }
  
  .index-item.active {
    border-left: none;
    background-color: #409eff;
    color: white;
    padding-left: 16px;
  }
}
</style>